<template>
  <div id="activeCommentDetail">
    <el-dialog
      class="about-set"
      title="活动帖子评论审核详细"
      :visible.sync="detailData.isShow"
      width="700px"
      :before-close="labelHandleClose"
    >
      <div class="task-detail-con">
        <div class="detail-left" v-if="formData.user">
          <img :src="formData.user.avatar" alt="头像" />
        </div>
        <div class="detail-right" v-if="formData.user">
          <span style="font-size: 15px;font-weight: bold">{{
            formData.user.name
          }}</span>
          <dl>
            <dt></dt>
            <dd>
              <span>{{ formData.user.dpAccount }}</span>
              <span>创建时间：{{ formData.createdDate | timeToTime() }}</span>
            </dd>
          </dl>
          <div v-html="formData.content.text" class="detail-content"></div>
          <!--查看图片-公共组件-->
          <div
            class="pic-box"
            :class="formData.content.img > 1 ? '' : 'single-pic'"
          >
            <showImg
              v-if="formData.content.img.length > 0"
              :img-list="formData.content.img"
            ></showImg>
          </div>
          <ul class="foot-list">
            <li>评论 {{ formData.commentCount }}</li>
            <li>点赞 {{ formData.likeCount }}</li>
            <li>分享 {{ formData.shareCount }}</li>
            <li>
              最新编辑者{{ formData.newOperName ? formData.newOperName : '-' }}
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import showImg from '@common/showImg'

export default {
  components: {
    showImg
  },
  props: ['detailData'],
  data() {
    return {
      formData: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let url = `/activities/posts/${this.detailData.id}`
      this.pubRequire('get', url, '', (response) => {
        this.formData = response
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.detailData.id = ''
      this.detailData.isShow = false
    }
  }
}
</script>

<style lang="less">
#activeCommentDetail {
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;

    .detail-left,
    .detail-right {
      display: table-cell;
      .detail-top {
        font-weight: 400;
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0 5px;
        border-radius: 2px;
      }
      .as-code-number {
        color: #ccc;
      }
    }

    .detail-left {
      width: 80px;
      vertical-align: top;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .pic-box {
      width: 504px;
      height: 300px;

      &.single-pic {
        height: 200px;
      }
    }

    .detail-right {
      dl {
        margin-bottom: 20px;

        dt {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        dd {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            span {
              margin-right: 10px;
            }
          }
        }
      }

      ul.foot-list {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 0 15px;
        overflow: hidden;

        li {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
  .detail-content {
    margin-bottom: 20px;
  }
}
</style>
